<template>
  <page-title />
  <div class="row q-mb-md">
    <q-btn label="新增" color="primary" @click="addPrefix" />
  </div>
  <div class="row items-start">
    <prefix-item class="q-mr-lg q-mb-lg" v-for="i in prefixes" :key="i.id" :item="i" />
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted} from "vue";
import PageTitle from "../../components/common/PageTitle.vue";
import PrefixItem from "./components/PrefixItem.vue";
import {usePrefix} from "../../hooks/usePrefix";
import {QBtn} from "quasar";

export default defineComponent({
  name: "PrefixList",
  components: {
    PageTitle,
    PrefixItem,
    QBtn,
  },
  setup() {

    const {init, prefixes, setPrefixes, listPrefixes, addMore} = usePrefix()

    onMounted(() => {
      listPrefixes()
    })

    function addPrefix() {
      if (addMore()) {
        prefixes.value.unshift(init())
      }
    }

    return {
      prefixes,
      addPrefix
    }
  }
})
</script>

<style scoped>

</style>